<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>游乐园</title>
	<link rel="stylesheet" href="css/adapter.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="font/iconfont.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css">
</head>
<body>
	<!-- 轮播图 -->
	<div class="swiper-container swiper-container-horizontal">
	    <div class="swiper-wrapper">
	      <div class="swiper-slide swiper-slide-active" style="width: 100%;">
	      	<img src="images/img1.jpg" alt="">
	      </div>
	      <div class="swiper-slide swiper-slide-active" style="width: 100%;">
	      	<img src="images/img2.jpg" alt="">
	      </div>
	      <div class="swiper-slide swiper-slide-active" style="width: 100%;">
	      	<img src="images/img3.jpg" alt="">
	      </div>
	    </div>
	    <!-- 分页器 -->
	    <div class="swiper-pagination swiper-pagination-bullets">
	    	<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
	    	<span class="swiper-pagination-bullet"></span>
	    	<span class="swiper-pagination-bullet"></span>
	    </div>
	  	<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
	</div>
	<!-- 活动列表 -->
	<div class="allitems">
		<div class="items">
			<div class="title">
				<h1>新版surface手机</h1>
			</div>
			<div class="item">
				<a href="#">
					<img src="images/img2.jpg" alt="">
				</a>
			</div>
			<div class="desc">
				<p>微软的手机业务没有放弃，而他们正在开发的是一款革命性的产品</p>
				<p class="meta">
					<span class="iconfont icon-all"> surface手机 </span>
					<span class="iconfont icon-time"> 2019-01-21 </span>	
				</p>
			<a href="#">最热</a>
			</div>
		</div>
		<div class="items">
			<div class="title">
				<h1>新版surface手机</h1>
			</div>
			<div class="item">
				<a href="#">
					<img src="images/img3.jpg" alt="">
				</a>
			</div>
			<div class="desc">
				<p>微软的手机业务没有放弃，而他们正在开发的是一款革命性的产品</p>
				<p class="meta">
					<span class="iconfont icon-all"> surface手机 </span>
					<span class="iconfont icon-time"> 2019-01-21 </span>	
				</p>
			<a href="#">最热</a>
			</div>
		</div>
		<div class="items">
			<div class="title">
				<h1>新版surface手机</h1>
			</div>
			<div class="item">
				<a href="#">
					<img src="images/img4.jpg" alt="">
				</a>
			</div>
			<div class="desc">
				<p>微软的手机业务没有放弃，而他们正在开发的是一款革命性的产品</p>
				<p class="meta">
					<span class="iconfont icon-all"> surface手机 </span>
					<span class="iconfont icon-time"> 2019-01-21 </span>	
				</p>
			<a href="#">最热</a>
			</div>
		</div>
	</div>
	
	<!-- 底部导航栏 -->
	<div class="Footerbar">
		<a href="#" class="iconfont icon-iconfontyouhuiquan active"><span>首页</span></a>
		<a href="#" class="iconfont icon-iconfontxingxing"><span>收藏</span></a>
		<a href="#" class="iconfont icon-account"><span>我的</span></a>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>
	<script>
	    var swiper = new Swiper('.swiper-container', {
	      pagination: {
	        el: '.swiper-pagination',
	        loop: true,
	      },
	    });
	  </script>
</body>
</html>